<template>
<div class="mainContainer">
    <div class="nav collapseTransition" :class="{navCollapse:isCollapse}">
        <div class="logo">
            <img src="../../static/logo.png" alt="">
            <h2 v-show="!isCollapse">智能监控分析系统</h2>
        </div>
        <common-nav :isCollapse="isCollapse"></common-nav>
    </div>
    <div class="mainPanel">
        <div class="header">
            <el-col :span="20" class="leftIcon">
                <span @click="collapse">
                    <i class="icon-white icon-third-hanbaocaidanzhedie"></i>
                </span>
            </el-col>
            <el-col :span="4" class="rightIcons">
                <div>
                    <el-dropdown @command="handleCommand" >
                        <span class="el-dropdown-link">
                            <i class="icon-white icon-third-querenfangan1"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item disabled>
                                <span>
                                    当前运行的是{{getCurrentScheme}}
                                </span>
                            </el-dropdown-item>
                            <el-dropdown-item command="toSchemeManagement" v-if="getUserAuthority">
                                <span>
                                    <i class="icon-third icon-white icon-third-qianwang-xiayibu"></i> 前往方案管理
                                </span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div>
                    <span v-if="!isLogin" @click.prevent="login" title="登录">
                        <i class="icon-white login-icon icon-third-71"></i>
                    </span>
                    <el-dropdown v-else @command="handleCommand">
                        <span class="el-dropdown-link">
                            <i class="icon-white icon-third-user"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item disabled>
                                <span>
                                    你好，{{getUserName}}
                                </span>
                            </el-dropdown-item>
                            <el-dropdown-item command="update">
                                <span >
                                    <i class="icon-third icon-white icon-third-mima-copy"></i>修改密码
                                </span>
                            </el-dropdown-item>
                            <el-dropdown-item command="logout">
                                <span >
                                    <i class="icon-third icon-white icon-third-logout"></i>退出登录
                                </span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
            <user-pwd-edit :showPwdEditForm.sync="dialogFormVisible" :userObj="getUser"></user-pwd-edit>
        </div>
        <div class="routerContainer">
            <transition name="fade" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</div>


</template>
<script>
import CommonNav from "../components/CommonNav.vue"
import util from '../util/util'
import UserPwdEdit from "./UserPwdEdit.vue"
export default {
    data(){
        return {
            isCollapse:false,
            dialogFormVisible:false
        }
    },
    components:{
        CommonNav,
        UserPwdEdit
    },
    computed:{
        isLogin(){
            return this.$store.state.loginStatus;
        },
        getUser(){
            return this.$store.state.userInfo;
        },
        getUserName(){
            return this.getUser?this.getUser.username:'未登录';
        },
        getUserAuthority(){
            return this.getUser?(this.getUser.authority==9?true:false):false;
        },
        getCurrentScheme(){
            return this.$store.state.currentScheme?this.$store.state.currentScheme:'无';
        }
    },
    created(){
        this.fetchData();
    },
    watch:{
        isCollapse(val){
           this.$store.dispatch("collapseFlag", val);
        },
    },
    methods:{
        collapse(){
            this.isCollapse = !this.isCollapse;
        },
        fetchData(){
            this.$api.scheme.schemeList().then(response => {
                if(response.data.code=="6000"){
                    this.$store.dispatch("currentScheme", response.data.data.select);
                }
            }).catch(error => {

            });
        },
        handleCommand(command) {
            switch(command){
                case "update":
                    this.updatePwd();
                    break;
                case "logout":
                    this.logout();
                    break;
                case "toSchemeManagement":
                    this.toSchemeManagement();
                    break;
            }
        },
        updatePwd:function(){
            this.dialogFormVisible = true;
        },
        login:function(){
            this.$router.push("/login");
        },
        logout:function(){
            this.$api.user.logout().then(response=>{
                if(response.data.code == "6000"){
                    this.$store.dispatch("logOut");
                    this.$router.push("/login");
                }else{
                    this.$message({
                        message: util.getErrorInfo(response.data.code),
                        type: 'error'
                    });
                }
            }).catch(error=>{
                this.$message({
                    type: 'error',
                    message: '请重试!'
                });
            });

        },
        toSchemeManagement:function(){
            this.$router.push("/settings/scheme");
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../assets/basic.scss";
.mainContainer{
    height: 100%;
    display: flex;
    flex-direction: row;
    .collapseTransition{
        transition: all .2s;
    }
    .nav{
        max-width: 260px;
        min-width: 260px;
        width: 260px;
        flex: 0 0 260px;
        height: 100%;
        min-height: 100vh;
        box-shadow: 0px 2px 6px rgba(0,21,41,.35);
        background: $ims-nav-bgcolor;
        z-index: 1;
        .logo{
            padding-left: 16px;
            height: 64px;
            line-height: 64px;
            img{
                display: inline-block;
                vertical-align: middle;
                height: 32px;
            }
            h2{
                display: inline-block;
                color:#fff;
                vertical-align: middle;
                font-size: 22px;
                margin: 0 0 0 10px;
                letter-spacing: 1px;
                font-family: "微软雅黑"
            }
        }
    }
    .navCollapse{
        min-width: 64px;
        max-width: 64px;
        width: 64px;
        flex: 0 0 64px;
    }
    .mainPanel{
        background: url("/static/background.jpg") no-repeat center;
        background-size: cover;
        // background-color:#113F59;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .header{
            height: 64px;
            line-height: 64px;
            background: $ims-header-color;
            box-shadow: 2px 0 6px rgba(0,0,0,.5);
            i{
                font-size: 18px;
            }
            .leftIcon{
                height: 64px;
                span{
                    height: 64px;
                    display: inline-block;
                    padding: 0 20px;
                    &:hover{
                        background: rgba($color: #000000, $alpha: 0.1)
                    }
                }
            }
            .rightIcons{
                display: flex;
                flex-direction: row;
                >div{
                    height: 64px;
                    padding: 0 10px;
                    &:hover{
                        background: rgba($color: #000000, $alpha: 0.1)
                    }
                }
                
            }

        }
        .routerContainer{
            height: calc(100% - 64px);
        }
    }

}

</style>

